<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '我的收藏',
    enablePullDownRefresh: false,
  },
}
</route>
<template>
  <view>
    <wd-tabs v-model="state.curTab" @change="handleTabChange">
      <wd-tab :title="item.name" v-for="item in state.tabList" :key="item.value"></wd-tab>
    </wd-tabs>
    <k-list :is-empty="!collectList.length" :loading="loading">
      <template v-for="item in collectList" :key="item.id">
        <view v-if="type == 2 && item.article" class="item">
          <article-card :mode="item.article.image.length > 1 ? 'spread' : 'swiper'"
            :imageKey="item.article.image.length > 1 ? 'image' : 'image.0'" :data="item.article"
            :commentTotal="item.commentTotal"
            @click="to(`pages-sub/post/post-detail?id=${item.article_id}`)"></article-card>
        </view>

        <view v-else-if="type == 1 && item.name" class="item">
          <around :showSales="false" :data="item" priceKey="min_price"
            @click="to(`pages-sub/product/product-detail?id=${item.goods_id}`)">
            <view class="mt-auto">
              <discount-bar :price="item.member_price" :levelName="item.levelName"></discount-bar>
            </view>
          </around>
        </view>
      </template>

    </k-list>
  </view>
</template>

<script setup>
import { to } from "@/utils/navigation";
import { fetchCollectList } from '@/service/user'
import useReachBottomLoadMore from '@/hooks/useReachBottomLoadMore'

const { data: collectList, loading, refresh } = useReachBottomLoadMore(fetchCollectList)

const state = ref({
  curTab: 0,
  tabList: [
    {
      name: '课程',
      value: 1,
    },
    {
      name: '社区',
      value: 2,
    },
  ],
})

const type = computed(() => {
  return state.value.tabList[state.value.curTab].value
})

function handleTabChange({ index }) {
  state.value.curTab = index
  refresh({ type: type.value })
}

onLoad(() => {
  refresh({ type: type.value })
})
</script>

<style lang="scss" scoped>
.item {
  padding: 20rpx 20rpx 1rpx;
  margin: 30rpx;
  box-shadow: 0rpx 3rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
}
</style>
